<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的常用指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind（html元素的属性值） 和 v-model（表单元素的value值） -->
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
        <!-- v-on 事件绑定，后面需要提供事件名称 -->
        <button v-on:click="handle()">点击1</button>
        <button @click="handle()">点击2</button>
        <br/>
        <!-- v-if（提供一个表达式，true的时候渲染） 和 v-show（元素的display属性的值） -->
        年龄 <input type="text" v-model="age">，经判定为：
        <span v-show="age <=35 ">年轻人（35周岁以下）</span>
        <span v-show=" age >35 && age <=60 ">中年人（35-60周岁）</span>
        <span v-show="age >60 ">老年人（60周岁以上）</span>
        <br/>
        <!-- v-for 遍历 -->
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
            <ol>
                <li v-for="(item,index) in list">{{index}}:{{item}}</li>
            </ol>
            <div v-for="(item,index) in list">{{index+1}}.{{item}}</div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                "url": "http://www.baidu.com",
                "age": 20,
                "list": ["北京","上海","苏州","太原"]
            },
            methods: {
                handle(){
                    alert("按钮被点击");
                }
            }
        }
        );
    </script>
</body>
</html>